<template>
<div>
  <!-- 面包屑导航区   -->
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/Ad_home' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>用户信息</el-breadcrumb-item>
  </el-breadcrumb>
  <!--  卡片视图区  -->
  <el-card class="box-card">
    <el-row :gutter="20">
      <el-col :span="7">
        <el-input placeholder="请输入需要查询的用户姓名" clearable v-model="message">
          <el-button slot="append" icon="el-icon-search" @click="searchUserByName()"></el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addDialogVisible = true"> 添加用户</el-button>
      </el-col>
    </el-row>
    <!--  用户列表区    -->
    <el-table :data="userList" border stripe :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="ID:">
              <span class="info">{{ props.row.user_id}}</span>
            </el-form-item>
            <el-form-item label="用户名:">
              <span>{{ props.row.user_name }}</span>
            </el-form-item>
            <el-form-item label="账号:">
              <span>{{ props.row.user_number }}</span>
            </el-form-item>
            <el-form-item label="密码:">
              <span>{{ props.row.user_password }}</span>
            </el-form-item>
            <el-form-item label="头像链接:">
              <span>{{ props.row.u_head_portrait }}</span>
            </el-form-item>
            <el-form-item label="真实姓名:">
              <span>{{ props.row.u_name }}</span>
            </el-form-item>
            <el-form-item label="性别:">
              <span>{{ props.row.user_sex }}</span>
            </el-form-item>
            <el-form-item label="班级:">
              <span>{{ props.row.user_class }}</span>
            </el-form-item>
            <el-form-item label="电话号码:">
              <span>{{ props.row.user_phone }}</span>
            </el-form-item>
            <el-form-item label="家庭住址:">
              <span>{{ props.row.user_address }}</span>
            </el-form-item>
            <el-form-item label="就读学校:">
              <span>{{ props.row.user_school }}</span>
            </el-form-item>
            <el-form-item label="父/母亲姓名:">
              <span>{{ props.row.user_pname }}</span>
            </el-form-item>
            <el-form-item label="用户经验值:">
              <span>{{ props.row.user_exp }}</span>
            </el-form-item>
            <el-form-item label="需求:">
              <span>{{ props.row.user_need }}</span>
            </el-form-item>
            <el-form-item label="年龄:">
              <span>{{ props.row.user_age }}</span>
            </el-form-item>
            <el-form-item label="钱包ID:">
              <span>{{ props.row.wallet_id }}</span>
            </el-form-item>
            <el-form-item label="grade_id:">
              <span>{{ props.row.grade_id }}</span>
            </el-form-item>
            <el-form-item label="formerlyMedical:">
              <span>{{ props.row.formerlyMedical }}</span>
            </el-form-item>
            <el-form-item label="particularCustoms:">
              <span>{{ props.row.particularCustoms }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column type="index" width="100px"></el-table-column>
      <el-table-column label="用户名" prop="user_name" width="120px"></el-table-column>
      <el-table-column label="账号" prop="user_number" width="200px"></el-table-column>
      <el-table-column label="姓名" prop="u_name"></el-table-column>
      <el-table-column label="经验值" prop="user_exp"></el-table-column>
      <el-table-column label="用户需求" prop="user_need" width="120px"></el-table-column>
      <el-table-column label="操作" prop="" width="160px">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="修改信息" placement="top" :enterable="false">
            <el-button type="primary" icon="el-icon-edit" size="small" circle @click="showUserInfo(scope.row.user_id)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除用户" placement="top" :enterable="false">
            <el-button type="danger" circle icon="el-icon-delete" size="small" @click="removeUserById(scope.row.user_id)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!--   分页区域    -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.current"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--  添加用户对话框  -->
    <el-dialog
        title="添加用户"
        :visible.sync="addDialogVisible"
        width="50%"
        @close="addDialogClosed">
      <!--   添加内容主题    -->
      <el-form :model="addUserForm" :rules="addUserFormRules" ref="addUserFormRef" label-width="100px">
        <el-form-item label="账号" prop="user_number">
          <el-input v-model="addUserForm.user_number"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="user_password">
          <el-input v-model="addUserForm.user_password"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="user_name">
          <el-input v-model="addUserForm.user_name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addUserList">确 定</el-button>
     </span>
    </el-dialog>
    <!--  修改对话框  -->
    <el-dialog
        title="用户详情"
        :visible.sync="editDialogVisible"
        width="50%"
        @close="editDialogClosed">
      <!--   修改用户表单的主要内容   -->
      <el-form  :model="editUserForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
        <el-form-item label="ID" prop="user_id">
          <el-input v-model="editUserForm.user_id" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="user_name">
          <el-input v-model="editUserForm.user_name"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="user_number">
          <el-input v-model="editUserForm.user_number"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="user_password">
          <el-input v-model="editUserForm.user_password"></el-input>
        </el-form-item>
        <el-form-item label="头像链接" prop="u_head_portrait">
          <el-input v-model="editUserForm.u_head_portrait"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名" prop="u_name">
          <el-input v-model="editUserForm.u_name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="user_sex">
          <el-input v-model="editUserForm.user_sex"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="user_class">
          <el-input v-model="editUserForm.user_class"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="user_phone">
          <el-input v-model="editUserForm.user_phone"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址" prop="user_address">
          <el-input v-model="editUserForm.user_address"></el-input>
        </el-form-item>
        <el-form-item label="就读学校" prop="user_school">
          <el-input v-model="editUserForm.user_school"></el-input>
        </el-form-item>
        <el-form-item label="父/母亲姓名" prop="user_pname">
          <el-input v-model="editUserForm.user_pname"></el-input>
        </el-form-item>
        <el-form-item label="用户经验值" prop="user_exp">
          <el-input v-model="editUserForm.user_exp"></el-input>
        </el-form-item>
        <el-form-item label="需求" prop="user_need">
          <el-input v-model="editUserForm.user_need"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="user_age">
          <el-input v-model="editUserForm.user_age"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editUserInfo">修改</el-button>
  </span>
    </el-dialog>
  </el-card>
</div>
</template>

<script>
export default {
  name: "M_user",
  //添加表单的验证规则
  //验证账号的规则
  data(){
    const checkUser_number = (rule,value,cb) => {
      const regUser_number = /(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{4,23}/
      if (regUser_number.test(value)){
        return cb()
      }
      cb(new Error('只能填写英文或者数字'))
    }
    //验证用户名的规则
     const checkUser_name = (rule,value,cb) => {
      const regUser_name = /[\\u4e00-\\u9fa5]*|\\w*|\\d*|_*/
       if (regUser_name.test(value)){
         return cb()
       }
       cb(new Error('不能包含特殊字符'))
     }
     //验证真实姓名校验规则
    const checkUser_u_name = (rule,value,cb) => {
      const regUser_u_name = /^[\u4E00-\u9FA5]{2,8}$/
      if (regUser_u_name.test(value)){
        return cb()
      }
      cb(new Error('只能输入中文'))
    }
    //验证手机号规则
    const checkphone = (rule,value,cb) => {
      const regphone = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/
      if (regphone.test(value)){
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }
    //验证数字的规则
    const checkNumber = (rule,value,cb) => {
      const regNumber = /^\d*$/
      if (regNumber.test(value)){
        return cb()
      }
      cb(new Error('只能输入数字'))
    }
    //验证年龄的检验规则
    const checkage = (rule,value,cb) => {
      const regage = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/
      if (regage.test(value)){
        return cb()
      }
      cb(new Error('请输入合法的年龄'))
    }
    return{
      queryInfo:{
        page:1,
        size:5,
      },
      total:0,
      userList:[],
      message:'',
      //查询详情表单的主体
      editUserForm:[],
      //添加表单的主体内容
      addUserForm:{
        user_number:'',
        user_password:'',
        user_name:'',
        status:1
      },
      //添加表单打开的状态
      addDialogVisible:false,
      //用户详情的打开的判断
      editDialogVisible:false,

    //  添加表单的校验规则
      addUserFormRules:{
        user_number:[
          {required:true,message:'账号不能为空',trigger:'blur'},
          {min:6,max:14,message:'账号的长度在6~14个字符之间',trigger:'blur'},
          {validator:checkUser_number,trigger: "blur"}
        ],
        user_password:[
          {required:true,message:'账号不能为空',trigger:'blur'},
          {min:6,max:14,message:'密码的长度在6~14个字符之间',trigger:'blur'},
          {validator:checkUser_number,trigger: "blur"}
        ],
        user_name:[
          {required:true,message:'用户名不能为空',trigger:'blur'},
          {min:3,max:10,message:'用户名的长度在3~10个字符之间',trigger:'blur'},
          {validator:checkUser_name,trigger: "blur"}
        ],
      },
      //修改表单的验证规则对象
      editFormRules:{
        user_name:[
          {required:true,message:'用户名不能为空',trigger:'blur'},
          {min:3,max:10,message:'用户名的长度在3~10个字符之间',trigger:'blur'},
          {validator:checkUser_name,trigger: "blur"}
        ],
        user_number:[
          {required:true,message:'账号不能为空',trigger:'blur'},
          {min:6,max:14,message:'账号的长度在6~14个字符之间',trigger:'blur'},
          {validator:checkUser_number,trigger: "blur"}
        ],
        user_password:[
          {required:true,message:'密码不能为空',trigger:'blur'},
          {min:6,max:14,message:'密码的长度在6~14个字符之间',trigger:'blur'},
          {validator:checkUser_number,trigger: "blur"}
        ],
        u_name:[
          {min:2,max:8,message:'姓名的长度在2~8个字符之间',trigger:'blur'},
          {validator:checkUser_u_name,trigger: "blur"}
        ],
        user_phone:[{validator:checkphone,trigger: "blur"}],
        user_exp:[ {validator:checkNumber,trigger: "blur"}],
        user_age:[ {validator:checkage,trigger: "blur"}],
      }
    }
  },
  methods:{
    //监听pageSize改变的事件
    handleSizeChange(newSize){
      this.queryInfo.size = newSize
      this.getUserList()
    },
    handleCurrentChange(newPage){
      this.queryInfo.page = newPage
      this.getUserList()
    },
    //获取用户列表
    async getUserList(){
      const {data:res} = await this.$http.get("admin/getAllUsers",{params:this.queryInfo})
      if (res.code == 200){
        this.userList = res.datapages.page.items
        this.total = res.datapages.page.totalCount;
      }
    },
    //查询用户
    async searchUserByName(){
      const {data:res} = await this.$http.get("admin/findUser",{params:{message:this.message}})
      console.log(res.datapages.page.items);
      if (res.code == '200'){
        this.userList = res.datapages.page.items
        this.total = res.datapages.page.totalCount
      }
    },
    //删除用户
    async removeUserById(id){
      const confirmResult = await this.$confirm("此操作将永久删除用户，是否继续",'提示',
          {
            confirmButtonText:'确定',
            cancelButtonText:'取消',
            type:'warning'
          }).catch(err => err)
      //如果用户确认删除，则返回字符串confirm
      //如果用户取消删除，则返回cancel
      if (confirmResult !== 'confirm'){
        return this.$message.info('已取消删除')
      }
      const {data:res} = await this.$http.delete("admin/delete/"+id)
      if (res.success !== true){
        return this.$message.error("删除失败")
      }
      this.$message.success("删除成功")
      this.getUserList()
    },
    //清空表单添加数据
    addDialogClosed(){
      this.$refs.addUserFormRef.resetFields()
    },
    //添加用户的按钮实现方法
    addUserList(){
      this.$refs.addUserFormRef.validate(async valid =>{
        if (!valid) return
        //校验通过时发起网络请求
        const addUser = this.$qs.stringify({
          user_number : this.addUserForm.user_number,
          user_password:this.addUserForm.user_password,
          user_name:this.addUserForm.user_name,
          status:this.addUserForm.status,
          user_sex:'男'
        })
        const {data:res} = await this.$http.post("admin/add",addUser)
        if (res.success != true){
          this.$message.error('添加用户失败!')
        }
        else{
          this.$message.success(res.message)
          //隐藏用户对话框
          this.addDialogVisible = false
          //重新获取列表
          this.getUserList()
        }
      })
    },
    //监听详情页面用户对话框的关闭
    editDialogClosed(){
      this.$refs.editFormRef.resetFields()
    },
    //显示修改用户数据按钮
    async showUserInfo(id){
      const {data:res} = await this.$http.get("admin/getUser",{params:{user_id:id}})
      if (res.code != 200){
        return this.$message.error('用户详情展开失败')
      }
      this.editUserForm = res.content
      this.editDialogVisible = true
    },
    //提交修改用户表单
    editUserInfo(){
      this.$refs.editFormRef.validate(async valid=>{
        if (!valid) return;
        var editUser = this.$qs.stringify({
          user_id:this.editUserForm.user_id,
          user_name:this.editUserForm.user_name,
          user_number:this.editUserForm.user_number,
          user_password:this.editUserForm.user_password,
          u_head_portrait:this.editUserForm.u_head_portrait,
          u_name:this.editUserForm.u_name,
          user_sex:this.editUserForm.user_sex,
          user_class:this.editUserForm.user_class,
          user_phone:this.editUserForm.user_phone,
          user_address:this.editUserForm.user_address,
          user_school:this.editUserForm.user_school,
          user_pname:this.editUserForm.user_pname,
          user_exp:this.editUserForm.user_exp,
          user_need:this.editUserForm.user_need,
          user_age:this.editUserForm.user_age,
          status:1
        })
        const {data:res} = await this.$http.put("admin/update",editUser)
        console.log(res);
        if (res.isok != true){
          return this.$message.error("修改失败")
        }
         this.$message.success("修改成功")
         this.getUserList()
        //关闭对话框
        this.editDialogVisible = false
      })
    }
  },

  created() {
    this.getUserList()
  }
}
</script>

<style scoped>
.el-table{
  margin-top: 25px;
  font-size: 15px;
}
.el-pagination{
  margin-top: 15px;
}

.info{
  font-weight: bold;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
